<template>
	<view class="chapter02">
			<cu-custom bgColor="bg-cyan">
				<block slot="content">第二章：示例</block>
			</cu-custom>
			<view class="cu-card">
				<view class="cu-item padding">
				 id属性	不建议写样式时使用id属性
				 网页版支持id 微信小程序等版本可能不支持
				</view>
				
				<view class="cu-item padding">
					class和style不过多说了
				</view>
				
				<view class="cu-item padding" :hidden="true">
					hidden应用在频繁切换元素显示的场景；
					本示例没有隐藏的原因是cu-item类导致的
				</view>
				
				<view class="cu-item padding">
					[data-*]其中*代表含义就是所有的名字，你自己规定；
					对应的值可以事件里面看到
				</view>
				 
				<view class="cu-item padding" @click="clickAi"  data-idx="987654321">
					@在uniapp中比较重要
					<view class="margin-top-sm">
						1.在uniapp HTML中各类事件都是用@开头
					</view>
					<view class="margin-top-sm  theme-bg">
						2.在uniapp JS部分@符号有代表项目目录的意思，
						 尤其是引入JS CSS VUE 和图片等文件时
					</view>
				</view>
				<view class="cu-item padding">
					<image src="@/static/logo.png" style="width: 200upx;height: 200upx;"></image>
				</view>
			</view>
		</view>
</template>

<script>
	export default{
			name:'chapter02',
			methods:{
				clickAi(e){
					console.log(e);
				}
			},
		}
</script>

<style>
</style>